import QtQuick 2.0

Rectangle
{
    id:animateButton
    width: 400
    height: width
    color:"transparent"
    AnimateButtonCenter
    {
        id:centerButton
        width: parent.width/4
        height: parent.height/4
        anchors.centerIn: parent
        transitions:trans.transitions

        MouseArea {
            id: area
            anchors.fill: centerButton
            onClicked: [
                centerButton.state == "normal" ? centerButton.state = "big" : centerButton.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround1
        anchors.centerIn: parent
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround1.state == "normal" ? animateButtonSurround1.state = "big" : animateButtonSurround1.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround2
        anchors.centerIn: parent
        angle: Math.PI/4
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround2.state == "normal" ? animateButtonSurround2.state = "big" : animateButtonSurround2.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround3
        anchors.centerIn: parent
        angle: Math.PI/2
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround3.state == "normal" ? animateButtonSurround3.state = "big" : animateButtonSurround3.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround4
        anchors.centerIn: parent
        angle: Math.PI/4*3
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround4.state == "normal" ? animateButtonSurround4.state = "big" : animateButtonSurround4.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround5
        anchors.centerIn: parent
        angle: Math.PI
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround5.state == "normal" ? animateButtonSurround5.state = "big" : animateButtonSurround5.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround6
        anchors.centerIn: parent
        angle: Math.PI/4*5
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround6.state == "normal" ? animateButtonSurround6.state = "big" : animateButtonSurround6.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround7
        anchors.centerIn: parent
        angle: Math.PI/2*3
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround7.state == "normal" ? animateButtonSurround7.state = "big" : animateButtonSurround7.state = "normal"
            ]
        }
    }
    AnimateButtonSurround
    {
        id:animateButtonSurround8
        anchors.centerIn: parent
        angle: Math.PI/4*7
        transitions:trans.transitions
        Connections{
            target:area
            onClicked: [
                animateButtonSurround8.state == "normal" ? animateButtonSurround8.state = "big" : animateButtonSurround8.state = "normal"
            ]
        }
    }

    Item {
        id:trans
        transitions: [
            Transition {
                from: "normal"
                to: "big"
                PropertyAnimation {property: "width"; easing.type: Easing.Linear; duration: 200 }
                PropertyAnimation {property: "height"; easing.type: Easing.Linear; duration: 200 }
            },
            Transition {
                from: "big"
                to: "normal"
                PropertyAnimation {property: "width"; easing.type: Easing.Linear; duration: 200 }
                PropertyAnimation {property: "height"; easing.type: Easing.Linear; duration: 200 }
            }
        ]
    }
}
